<template>
	<view class="egg-game">
		<!-- 顶部信息 -->
		<view class="game-header">
			<view class="chance-info">
				<text class="chance-text">剩余机会：</text>
				<text class="chance-num">{{chances}}次</text>
			</view>
			<view class="reward-info">
				<text class="reward-text">已获得：</text>
				<text class="reward-num">¥{{totalReward}}</text>
			</view>
		</view>
		
		<!-- 金蛋区域 -->
		<view class="egg-container">
			<view class="egg-list">
				<view 
					class="egg-item" 
					v-for="(egg, index) in eggs" 
					:key="index"
					:class="{'egg-broken': egg.isBroken}"
					@click="hitEgg(index)"
				>
					<view class="egg-image" :class="{'egg-hit': egg.isBroken}">
						<view class="egg-shape" :class="{'egg-broken': egg.isBroken}"></view>
					</view>
					<view class="egg-reward" v-if="egg.isBroken">
						<text class="reward-amount">¥{{egg.reward}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="game-footer">
			<button 
				class="reset-btn" 
				:disabled="!canReset"
				@click="resetGame"
			>重新开始</button>
		</view>
		
		<!-- 奖励弹窗 -->
		<view class="reward-popup" v-if="showReward" :class="{'popup-show': showReward}">
			<view class="popup-content">
				<view class="popup-title">恭喜获得</view>
				<view class="popup-amount">¥{{currentReward}}</view>
				<view class="popup-close" @click="closeReward">确定</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 游戏配置
const MAX_CHANCES = 3 // 最大机会次数
const EGG_COUNT = 6 // 金蛋数量
const REWARDS = [88, 66, 50, 30, 20, 10] // 奖励金额

// 游戏状态
const chances = ref(MAX_CHANCES)
const totalReward = ref(0)
const currentReward = ref(0)
const showReward = ref(false)
const eggs = ref([])

// 计算属性
const canReset = computed(() => {
	return chances.value === 0 || eggs.value.every(egg => egg.isBroken)
})

// 初始化游戏
const initGame = () => {
	chances.value = MAX_CHANCES
	totalReward.value = 0
	eggs.value = Array(EGG_COUNT).fill().map(() => ({
		isBroken: false,
		reward: 0
	}))
	// 随机分配奖励
	const shuffledRewards = [...REWARDS].sort(() => Math.random() - 0.5)
	eggs.value.forEach((egg, index) => {
		egg.reward = shuffledRewards[index]
	})
}

// 砸金蛋
const hitEgg = (index) => {
	if (chances.value <= 0 || eggs.value[index].isBroken) return
	
	// 播放砸蛋动画
	eggs.value[index].isBroken = true
	chances.value--
	
	// 显示奖励
	currentReward.value = eggs.value[index].reward
	totalReward.value += currentReward.value
	showReward.value = true
	
	// 检查游戏是否结束
	if (chances.value === 0 || eggs.value.every(egg => egg.isBroken)) {
		setTimeout(() => {
			uni.showModal({
				title: '游戏结束',
				content: `恭喜您获得总奖励：¥${totalReward.value}`,
				showCancel: false
			})
		}, 1000)
	}
}

// 关闭奖励弹窗
const closeReward = () => {
	showReward.value = false
}

// 重置游戏
const resetGame = () => {
	initGame()
}

// 页面加载时初始化游戏
onMounted(() => {
	initGame()
})
</script>

<style>
.egg-game {
	min-height: 100vh;
	background-color: #F8F8F8;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
}

.game-header {
	background-color: #FFFFFF;
	padding: 20rpx;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.chance-info, .reward-info {
	display: flex;
	align-items: center;
}

.chance-text, .reward-text {
	font-size: 28rpx;
	color: #666;
}

.chance-num, .reward-num {
	font-size: 32rpx;
	color: #D02B29;
	font-weight: bold;
	margin-left: 10rpx;
}

.egg-container {
	flex: 1;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.egg-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
	padding: 20rpx;
}

.egg-item {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200rpx;
}

.egg-image {
	width: 160rpx;
	height: 160rpx;
	transition: all 0.3s ease;
	transform-origin: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.egg-shape {
	width: 120rpx;
	height: 160rpx;
	background: linear-gradient(135deg, #FFD700, #FFA500);
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	position: relative;
	box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.2);
	transition: all 0.3s ease;
}

.egg-shape::before {
	content: '';
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	right: 20rpx;
	bottom: 20rpx;
	background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.1));
	border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.egg-shape::after {
	content: '';
	position: absolute;
	top: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 40rpx;
	background: rgba(255,255,255,0.4);
	border-radius: 50%;
}

.egg-shape.egg-broken {
	transform: scale(0.8) rotate(-5deg);
	background: linear-gradient(135deg, #FFA500, #FF8C00);
	box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
}

.egg-shape.egg-broken::before {
	background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
}

.egg-shape.egg-broken::after {
	opacity: 0.5;
}

.egg-hit {
	animation: hitEgg 0.5s ease;
}

@keyframes hitEgg {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.9) rotate(-5deg);
	}
	100% {
		transform: scale(0.8);
	}
}

.egg-reward {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: #FFE4E4;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	animation: showReward 0.5s ease;
}

@keyframes showReward {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(20rpx);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

.reward-amount {
	font-size: 24rpx;
	color: #D02B29;
}

.game-footer {
	padding: 20rpx;
}

.reset-btn {
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 40rpx;
	font-size: 32rpx;
	padding: 20rpx 0;
	transition: all 0.3s ease;
}

.reset-btn:active {
	transform: scale(0.98);
}

.reset-btn[disabled] {
	background-color: #CCCCCC;
}

.reward-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.popup-show {
	opacity: 1;
}

.popup-content {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 40rpx;
	text-align: center;
	width: 80%;
	max-width: 600rpx;
	transform: scale(0.8);
	opacity: 0;
	animation: popupShow 0.3s ease forwards;
}

@keyframes popupShow {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.popup-title {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.popup-amount {
	font-size: 48rpx;
	color: #D02B29;
	font-weight: bold;
	margin-bottom: 30rpx;
}

.popup-close {
	background-color: #D02B29;
	color: #FFFFFF;
	padding: 20rpx 0;
	border-radius: 40rpx;
	font-size: 32rpx;
	transition: all 0.3s ease;
}

.popup-close:active {
	transform: scale(0.98);
}
</style> 